<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="Generator" content="EditPlus®">
	<meta name="Author" content="JackieZheng">
	<meta name="Keywords" content="2019-nCoV,肺炎,疫情,中华菊头蝠,冠状病毒,感染">
	<meta name="Description" content="2019-nCoV 全国新型冠状病毒肺炎（NCP）疫情每日数据动态趋势">
	<title>全国新型冠状病毒肺炎（NCP）疫情数据动态趋势</title>

	<link href="../Css/index.css" rel="stylesheet">

	<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.4.0-rc.1/echarts.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.js"></script>
	<script
		src="https://cdnjs.cloudflare.com/ajax/libs/jquery-animateNumber/0.0.14/jquery.animateNumber.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/js/jquery.tooltipster.min.js"></script>

	<!--
	<script src="../Js/jquery.min.js"></script>
	<script src="../Js/echarts.min.js"></script>
	<script src="../Js/Date.prototype.js"></script>
	<script src="../Js/jquery.color.min.js"></script>
	<script src="../Js/jquery.animateNumber.min.js"></script>
	<script src="../Js/jquery.tooltipster.min.js"></script> 
	-->
	<script src="../Js/Date.prototype.js"></script>
	<script src="../Js/layer.js"></script>
	<style> </style>
</head>

<body>
	<div id="realTimeData">
		<div class="datatitle">全国疫情实时数据统计</div>
		<div class="datasubtitle">(截至2020-01-31 08:09)</div>
		<ul class="statistics">
			<li>
				<strong style="color: rgb(247, 76, 49);" dataContent="">0</strong>
				<span dataContent="">累计确诊</span>
			</li>
			<li>
				<strong style="color: rgb(247, 130, 7);" dataContent="">0</strong>
				<span dataContent="">现有疑似</span>
			</li>
			<li>
				<strong style="color: rgb(93, 112, 146);" dataContent="">0</strong>
				<span dataContent="">累计死亡</span>
			</li>
			<li>
				<strong style="color: rgb(40, 183, 163);" dataContent="">0</strong>
				<span dataContent="">累计治愈</span>
			</li>
		</ul>
	</div>
	<div id="main"></div>

	<div id="dataFrom">
		<span>
			<a title="GitHub Page" href="https://github.com/JackieZheng/2019-nCoV">
				<svg height="14" width="14" viewBox="0 0 16 16">
					<path fill="#999"
						d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z">
					</path>
				</svg>
			</a>
		</span>
		<span>
			<a title="Home Page" href="https://jackiezheng.github.io/2019-nCoV">
				<svg viewBox="0 0 1152 1024" width="16" height="16">
					<path fill="#999"
						d="M976 625.4V912c0 26.6-21.4 48-48 48H696c-13.2 0-24-10.8-24-24V712c0-13.2-10.8-24-24-24h-144c-13.2 0-24 10.8-24 24v224c0 13.2-10.8 24-24 24H224c-26.6 0-48-21.4-48-48V625.4c0-7.2 3.2-14 8.8-18.6l376-309.6c8.8-7.2 21.6-7.2 30.6 0l376 309.6c5.4 4.6 8.6 11.4 8.6 18.6z m167.2-121.8L976 365.8V88.8c0-13.2-10.8-24-24-24h-112c-13.2 0-24 10.8-24 24V234l-179-147.4c-35.4-29.2-86.6-29.2-122 0L8.8 503.6c-10.2 8.4-11.6 23.6-3.2 33.8l51 62c8.4 10.2 23.6 11.6 33.8 3.2l470.4-387.4c8.8-7.2 21.6-7.2 30.6 0l470.4 387.4c10.2 8.4 25.4 7 33.8-3.2l51-62c8.4-10.4 6.8-25.4-3.4-33.8z">
					</path>
				</svg>
			</a>
		</span>
		<span>
			(数据来源：<a href="http://www.nhc.gov.cn/xcs/yqtb/list_gzbd.shtml" target="_blank">国家卫健委</a>)
		</span>

	</div>
	<script type="text/javascript">
		var yesterday_confirmed = 0, yesterday_unconfirmed = 0, yesterday_died = 0, yesterday_cured = 0;

		//"https://service-nxxl1y2s-1252957949.gz.apigw.tencentcs.com/release/newpneumonia/"
		var dataApi = 'https://service-0gg71fu4-1252957949.gz.apigw.tencentcs.com/release/dingxiangyuan';
		dataApi = 'https://yiqing.ahusmart.com/overall';

		var myChart = echarts.init(document.getElementById('main'));
		var dataSource = [];
		var dimensions = ['日期', '累计确诊', '现有确诊（含重症）', '现有疑似', '现有重症', '累计死亡', '累计治愈',
			'累计确诊+现有疑似', '新增确诊', '新增疑似', '新增(疑似+确诊)', '观察中', '死亡/确诊'];
		option = {
			title: {
				text: '全国新型肺炎疫情趋势',
				x: 'center',
				y: 'top',
				top: '15px',
				subtext: '(支持缩放及左右滑动)',
				subtextStyle: {
					fontSize: 12
				}
			},
			legend: {
				type: 'scroll',
				x: 'center',
				y: 'bottom',
				padding: [0, 20],
				itemGap: 3,
				selected: {}
			},
			grid: {
				left: '15%',
				bottom: '40px'
			},
			tooltip: {},
			dataset: {
				dimensions: dimensions,
				source: dataSource,
			},
			xAxis: { type: 'category' },
			yAxis: {},
			dataZoom: [
				{
					type: 'inside',
					throttle: '50',
					minValueSpan: 7,
					start: 100,
					end: 100
				}],
			series: [
				{ type: 'bar' },
				{ type: 'bar' },
				{ type: 'bar' },
				{ type: 'bar' },
				{ type: 'bar' },
				{ type: 'bar' },
				{
					type: 'line',
					label: {
						normal: {
							show: true,
							position: 'top',
						},


					}
				},
				{
					type: 'line',
					label: {
						normal: {
							show: true,
							position: 'top',
						},


					}
				},
				{
					type: 'line',
					label: {
						normal: {
							show: true,
							position: 'top',
						},


					}
				},
				{
					type: 'line',
					label: {
						normal: {
							show: true,
							position: 'top',
						}
					}
				},
				{
					type: 'line',
					label: {
						normal: {
							show: true,
							position: 'top',
						}
					}
				},
				{
					type: 'line',
					label: {
						normal: {
							show: true,
							position: 'top',
							formatter: function (params) {
								str = params.data['死亡/确诊'] + '%'
								return str;
							}
						}
					},
					tooltip: {
						formatter: function (item) {
							str = item.seriesName + "<br>"
								+ item.marker + ' ' + item.data['日期'] + ' : ' + item.data['死亡/确诊'] + '%';
							return str;
						}

					}
				}
			]
		};

		$.ajaxSettings.async = false;
		$.getJSON("../Json/data.json?" + Date.parse(new Date()), function (data) {
			dataSource = data;

			// dataSource.forEach(function (item) {
			// 	item["死亡/确诊"] = (item.死亡 / item.确诊).toFixed(3);
			// 	item["治愈/确诊"] = (item.治愈 / item.确诊).toFixed(3);
			// });
			// option.dataset.dimensions.push("死亡/确诊");
			// option.series.push({ type: 'line', label: { normal: { show: true, position: 'top' } } });

			// option.dataset.dimensions.push("治愈/确诊");
			// option.series.push({
			// 	type: 'line',
			// 	label: { normal: { show: true, position: 'top' } },
			// 	itemStyle: { normal: { color: '#8cd5c2', lineStyle: { color: '#8cd5c2' } } },
			// });

			option.legend.selected['观察中'] = false;
			option.legend.selected['死亡/确诊'] = false;
			option.dataset.source = dataSource;

			var yesterday_data = data.filter(item => (new Date(item.日期)).Format("yyyy/M/d") == (new Date()).DateAdd("d", -1).Format("yyyy/M/d"));
			console.log(yesterday_data);
			if (yesterday_data.length > 0) {
				yesterday_confirmed = ~~yesterday_data[0].累计确诊;
				yesterday_unconfirmed = ~~yesterday_data[0].现有疑似;
				yesterday_died = ~~yesterday_data[0].累计死亡;
				yesterday_cured = ~~yesterday_data[0].累计治愈;
			}
		})


		myChart.setOption(option);
		window.onresize = () => this.myChart.resize();

		update();

		$('.tooltip').tooltipster({
			theme: 'tooltipster-shadow'
		});

		$(".statistics>li>strong").each(function () {
			$(this).bind("click", function () {
				$(this).attr('dataContent', '');
			})


		});

		window.setInterval(() => update(), 1000 * 60 * 30);

		function update() {
			$.getJSON(dataApi + "?" + Date.parse(new Date()), function (newpneumoniadata) {
				/*
				$(".datasubtitle").text("(截至 " + newpneumoniadata.data.conf.component[0].mapLastUpdatedTime + ")");

				var summaryDataIn = newpneumoniadata.data.conf.component[0].summaryDataIn;
				freshDataNum($(".statistics>li>strong").eq(0), summaryDataIn.confirmed);
				freshDataNum($(".statistics>li>strong").eq(1), summaryDataIn.unconfirmed);
				freshDataNum($(".statistics>li>strong").eq(2), summaryDataIn.died);
				freshDataNum($(".statistics>li>strong").eq(3), summaryDataIn.cured);
				*/

				var summaryDataIn = newpneumoniadata.result;
				$(".datasubtitle").text("(截至 "
					+ new Date(summaryDataIn.updateTime).Format("yyyy-MM-dd hh:mm:ss") + ")");

				/*现有确诊*/
				let currentConfirmedCount = summaryDataIn.currentConfirmedCount;

				/*累计确诊*/
				let confirmedCount = summaryDataIn.confirmedCount;

				/*现有疑似*/
				let suspectedCount = summaryDataIn.suspectedCount;

				/*累计死亡*/
				let deadCount = summaryDataIn.deadCount;

				/*累计治愈*/
				let curedCount = summaryDataIn.curedCount;

				/*现有重症*/
				let seriousCount = summaryDataIn.seriousCount;

				freshDataNum($(".statistics>li>strong").eq(0), confirmedCount);
				freshDataNum($(".statistics>li>strong").eq(1), suspectedCount);
				freshDataNum($(".statistics>li>strong").eq(2), deadCount);
				freshDataNum($(".statistics>li>strong").eq(3), curedCount);


				if (confirmedCount > 0 && yesterday_confirmed > 0) {
					$(".statistics>li>span").eq(0).attr('dataContent', '+' + (confirmedCount - yesterday_confirmed));
				}
				if (suspectedCount > 0 && yesterday_unconfirmed > 0) {
					$(".statistics>li>span").eq(1).attr('dataContent', '+' + (suspectedCount - yesterday_unconfirmed));
				}
				if (deadCount > 0 && yesterday_died > 0) {
					$(".statistics>li>span").eq(2).attr('dataContent', '+' + (deadCount - yesterday_died));
				}
				if (curedCount > 0 && yesterday_cured > 0) {
					$(".statistics>li>span").eq(3).attr('dataContent', '+' + (curedCount - yesterday_cured));
				}
				console.log(summaryDataIn);
			})
		}

		function freshDataNum(target, newNum) {

			var oldNum = ~~(target.text());
			var increaseNum = ~~(target.attr('dataContent'));

			if (oldNum != 0 && (newNum - oldNum) != 0) {
				target.attr('dataContent', '+' + (increaseNum + (newNum - oldNum)));
			}
			else {
				//target.attr('dataContent', '');
			}

			target
				.prop('number', oldNum)
				.animateNumber({ number: newNum }, 3000);
		}

		var tipContent = "数据每5分钟自动刷新一次，如有更新会在数字右上角提示。"
			+ "数字右下角为当前相对昨天24时总数的增加量。"
			+ "(实时数据采集自网络，仅供参考！实际数据以官方为准！！)";
		var tip_index = 0;
		$(".datasubtitle").bind("mouseenter",
			function () {
				var that = this;
				tip_index = layer.tips(tipContent,
					that,
					{
						tips: [1, '#CDDC39'],
						time: 0
					});
			}).bind("mouseleave", () => layer.close(tip_index))


	</script>
	<script>
		var _hmt = _hmt || [];
		(function () {
			var hm = document.createElement("script");
			hm.src = "https://hm.baidu.com/hm.js?cdcc4d7a702f0597c5bfc96ec9508cbf";
			var s = document.getElementsByTagName("script")[0];
			s.parentNode.insertBefore(hm, s);
		})();
	</script>
</body>

</html>